<!-- 登陆界面 -->

<template>
  <div id="Login">
    <div class="ipt">
      <div class="ipt_box">
        <!-- 左边 -->
        <div class="img">
          <img :src="pic" alt="" />
        </div>
        <!-- 右 -->
        <div class="ipt_right">
          <div class="logo">
            <img :src="logo" alt="" />
          </div>
          <el-form :model="loginForm" ref="loginForm">
            <el-form-item
              prop="uname"
              :rules="[
                {
                  required: true,
                  message: '请输入账号',
                  trigger: ['blur', 'change'],
                },
              ]"
            >
              <el-input
                placeholder="用户名"
                v-model="loginForm.uname"
                prefix-icon="el-icon-user"
              ></el-input>
            </el-form-item>
            <el-form-item
              prop="upassword"
              :rules="[
                {
                  required: true,
                  message: '请输入密码',
                  trigger: ['blur', 'change'],
                },
              ]"
            >
              <el-input
                placeholder="请输入密码"
                show-password
                v-model="loginForm.upassword"
                prefix-icon="el-icon-lock"
              ></el-input>
            </el-form-item>
            <div class="verificationCode">
              <el-form-item
                prop="uCode"
                :rules="[
                  {
                    required: true,
                    message: '验证码不能为空',
                    trigger: ['blur', 'change'],
                  },
                ]"
              >
                <el-input
                  placeholder="验证码"
                  v-model="loginForm.uCode"
                  prefix-icon="el-icon-message"
                ></el-input>
              </el-form-item>

              <div class="code">
                <img :src="code" alt="" />
              </div>
            </div>
            <el-form-item>
              <el-button
                type="primary"
                class="btn"
                @click="getFromData(loginForm)"
                >登录</el-button
              >
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>

    <vue-particles
      color="#fff"
      :particleOpacity="0.7"
      :particlesNumber="60"
      shapeType="circle"
      :particleSize="4"
      linesColor="#fff"
      :linesWidth="1"
      :lineLinked="true"
      :lineOpacity="0.4"
      :linesDistance="150"
      :moveSpeed="2"
      :hoverEffect="true"
      hoverMode="grab"
      :clickEffect="true"
      clickMode="push"
    >
    </vue-particles>

    <!-- <div class="login_list">123</div> -->
  </div>
</template>

<script>
import { getLogo, getCode, getUserInfo } from "@/network/api/user";
//引入存储token的方法
import { setCookie } from "@/utils/cookie";
import { mapMutations } from "vuex";
export default {
  name: "Login",
  data() {
    return {
      //图片数据
      pic: "",
      logo: "",
      checked: true,
      code: "", //二维码图片

      //表单数据
      loginForm: {
        uname: "",
        upassword: "",
        uCode: "",
        key: "", //key值
      },
    };
  },
  created() {
    //获取logo图片方法以及验证码方法
    this.getAllLogo();
  },
  methods: {
    ...mapMutations("user", {
      updata: "updata_token",
    }),
    async getAllLogo() {
      let res = await getLogo();
      console.log(res);
      this.pic = res.data.data.banner[0].pic;
      this.logo = res.data.data.loginLogo;
      let Code = await getCode();
      console.log(Code);
      this.code = Code.data.data.code;
      this.loginForm.key = Code.data.data.key;
    },

    //用户登陆
    async getFromData(loginForm) {
      console.log(loginForm);
      let { uname, uCode, key, upassword } = this.loginForm;
      let res = await getUserInfo(uname, uCode, key, upassword, "");
      console.log(res);
      if (res.data.code != 200) {
        this.$message({
          message: res.data.message,
          type: "error",
        });
      } else {
        let token = res.data.data.token;

        //存储token
        setCookie("_token", token);

        //123323232
        this.updata(token);
        let { redirect } = this.$route.query;
        console.log(redirect);
        this.$router.replace({ path: redirect });
      }
    },
  },
};
</script>

<style scoped lang="scss">
#Login {
  background-image: url(@/assets/imgs/bg.jpg);
  width: 100%;
  height: 100%;

  .ipt {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 999;
    background-color: #fff;
    border-radius: 10px;
    .ipt_box {
      display: flex;
      height: 400px;
      text-align: center;
      .img img {
        height: 400px;
      }
      .ipt_right {
        padding: 2px 40px 32px 40px;
        box-sizing: border-box;
        // background-color: #fff;
        .logo {
          img {
            width: 75px;
            height: 75px;
            margin-bottom: 20px;
          }
        }
        .btn {
          width: 100%;
          margin-top: 30px;
        }
        .verificationCode {
          display: flex;
          .code {
            margin-left: 10px;
          }
        }
      }
    }
  }
}
</style>
